<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="房间名称" prop="roomName">
        <el-input
          v-model="queryParams.roomName"
          placeholder="请输入房间名称"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="楼栋" prop="buildingId">
        <el-select v-model="queryParams.buildingId" placeholder="请输入楼栋" :clearable="true">
          <el-option
            v-for="dict in buildList"
            :key="dict.id"
            :label="dict.buildingName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="房间类型" prop="roomTypeId">
        <el-select v-model="queryParams.roomTypeId" placeholder="请输入房间类型" :clearable="true">
          <el-option
            v-for="dict in roomTypeList"
            :key="dict.id"
            :label="dict.typeName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="床位名称" prop="bedName">
        <el-input
          v-model="queryParams.bedName"
          placeholder="请输入床位名称"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="床位类型" prop="bedTypeId">
        <el-select v-model="queryParams.bedTypeId" placeholder="请输入床位类型" :clearable="true">
          <el-option
            v-for="dict in bedTypeList"
            :key="dict.id"
            :label="dict.typeName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['bed:info:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['bed:info:create-room']" @click="handleClickCreateRoom">
          <Icon icon="ep:plus" />
          新增
        </el-button>
        <el-button v-hasPermi="['bed:info:room-type']" @click="handleClickRoomType">
          房间类型
        </el-button>
        <el-button v-hasPermi="['bed:info:bed-type']" @click="handleClickBedType">
          床位类型
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="RoomInfo"
      height-per="60"
      @page-change="getPage"
      @row-click="handleRowClick"
      @row-dblclick="handleTableDblclick"
    >
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdateRoom(row)"
          v-hasPermi="['bed:info:update-room']"
        />
        <context-menu-item
          label="删除"
          @click="handleMenuDeletedRoom(row)"
          v-hasPermi="['bed:info:deleted-room']"
        />
      </template>
    </Table>
  </ContentWrap>
  <ContentWrap class="h-[35%]">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="床位" name="bed">
        <Table :columns="bedColumns" save-key="BedInfo" :data="bedData" height-per="25" />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
  <BedInfoEdit ref="editFormRef" @success="getPage" />
  <BedType ref="bedTypeFormRef" @closed="handleBedTypeClosed" />
  <RoomType ref="roomTypeFormRef" @closed="handleRoomTypeClosed" />
</template>
<script setup name="BedInfo" lang="ts">
import * as BedInfoApi from '@/api/bed/bedInfo'
import * as BuildInfoApi from '@/api/bed/buildingInfo'
import BedInfoEdit from './BedInfoEdit.vue'
import BedType from './BedType.vue'
import RoomType from './RoomType.vue'
import { DICT_TYPE, getDictObj } from '@/utils/dict'
const message = useMessage() // 消息弹窗
const editFormRef = ref()
const bedTypeFormRef = ref()
const roomTypeFormRef = ref()
const bedData = ref()
const buildList = ref()
const roomTypeList = ref()
const bedTypeList = ref()
const activeName = ref('bed')
const queryFormRef = ref()
const queryParams = ref({
  roomName: undefined,
  buildingId: undefined,
  roomTypeId: undefined,
  bedName: undefined,
  bedTypeId: undefined
})
const queryData = ref()
const columns = [
  {
    label: '房间名称',
    prop: 'roomName'
  },
  {
    label: '房间类型',
    prop: 'roomType.typeName'
  },
  {
    label: '楼栋',
    prop: 'building.buildingName'
  },
  {
    label: '房间朝向',
    prop: 'roomOrientation',
    formatter: ({ roomOrientation }) =>
      getDictObj(DICT_TYPE.BED_ROOM_ORIENTATION, roomOrientation).label
  },
  {
    label: '房间面积',
    prop: 'roomArea'
  },
  {
    label: '床位数量',
    prop: 'bedNumber'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
const bedColumns = [
  {
    label: '床位名称',
    prop: 'bedName'
  },
  {
    label: '床位类型',
    prop: 'bedType.typeName'
  },
  {
    label: '价格',
    prop: 'price'
  },
  {
    label: '收费方式',
    prop: 'chargeType',
    formatter: ({ chargeType }) => getDictObj(DICT_TYPE.FEE_CHARGE_TYPE, chargeType).label
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 初始化 */
onMounted(async () => {
  buildList.value = await BuildInfoApi.listQuery()
  roomTypeList.value = await BedInfoApi.listQueryRoomType()
  bedTypeList.value = await BedInfoApi.listQueryBedType()
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreateRoom = () => {
  editFormRef.value.open('create', 0)
}

/** 房间类型按钮操作 */
const handleClickRoomType = () => {
  roomTypeFormRef.value.open()
}

/** 床位类型按钮操作 */
const handleClickBedType = () => {
  bedTypeFormRef.value.open()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await BedInfoApi.roomQuery(queryParams.value)
}

/** 处理右击事件 修改 */
const handleMenuUpdateRoom = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理右击事件 删除 */
const handleMenuDeletedRoom = async (row) => {
  await message.confirm('确定要删除此房屋吗？')
  await BedInfoApi.roomDeleted(row.id)
  getPage()
}

const handleBedTypeClosed = async () => {
  bedTypeList.value = await BedInfoApi.listQueryBedType()
}

const handleRoomTypeClosed = async () => {
  roomTypeList.value = await BedInfoApi.listQueryRoomType()
}

const handleRowClick = async (row) => {
  bedData.value = await BedInfoApi.getByRoomId(row.id)
}

const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}
</script>
